<!DOCTYPE html>
	<head>
	<meta charset="utf-8" />
		<link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png">
		<link rel="icon" type="image/png" href="../assets/img/favicon.png">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<title>
			文章搜索
		</title>
		<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
		<!--     Fonts and icons     -->
		<link href="../assets/css/fonts.css" rel="stylesheet" />
		<link rel="stylesheet" href="../assets/css/new_file.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
		<!-- CSS Files -->
		<link href="../assets/css/bootstrap.min.css" rel="stylesheet" />
		<link href="../assets/css/now-ui-kit.css?v=1.3.0" rel="stylesheet" />
		<!-- CSS Just for demo purpose, don't include it in your project -->
		<link href="../assets/demo/demo.css" rel="stylesheet" />
		<script src="../assets/js/axios-min.js"></script>
		<script src="../assets/js/vue.js"></script>
		<script src="../assets/js/vue-axios.js"></script>
		<style>
			#change{
				color: red;
			}
		</style>
	</head>

	<body class="login-page sidebar-collapse">
		<!-- Navbar -->
		<nav class="navbar navbar-expand-lg bg-primary fixed-top navbar-transparent " color-on-scroll="400">
			<div class="container">
				
      <div class="navbar-translate">
      	<span></span>
        <button class="navbar-toggler navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-bar top-bar"></span>
          <span class="navbar-toggler-bar middle-bar"></span>
          <span class="navbar-toggler-bar bottom-bar"></span>
        </button>
      </div>
      <div class="collapse navbar-collapse justify-content-end" id="navigation" data-nav-image="../assets/img/blurred-image-1.jpg">
        <ul class="navbar-nav">         
		  <li class="nav-item">
		    <a class="nav-link" href="main.html" style="font-size: 18px;">个人主页</a>
		  </li>
		   <li class="nav-item">
            <a class="nav-link" href="write.html" style="font-size: 18px;">文章编辑</a>
          </li>
		   <li class="nav-item">
            <a class="nav-link" href="login.html" style="font-size: 18px;">退出登录</a>
          </li>
        </ul>
      </div>
			</div>
		</nav>
		<!-- End Navbar -->
		<div class="wrapper">
    <div class="page-header clear-filter page-header-small" filter-color="orange">
		
      <div class="page-header-image" data-parallax="true" style="background-image:url(../assets/img/bg6.jpg);">
      </div>
      <h1 style="margin-top: 180px; margin-left: 8%; background-color: #ec720e; width: 230px;">文章搜索</h1>

    </div>
    <div class="section" id="search">
      <div class="container">
		<div class="container" >
		<div class="input-group">
		<input type="text" id="texts" v-model="search"   class="form-control" style="border-radius: 0px;">
		<button id="button" class="input-group-addon btn btn-primary" style="margin: 0;" @click="submit()">搜索</button>
		</div>
		</div >
		<div id="content" v-for="item in passage">
        <h3 class="title" @click="read(item)" style="cursor:pointer;">{{item.title}}</h3>
        <h5 class="description" @click="read(item)" style="cursor:pointer;">{{item.body}}</h5>
		<hr />
		</div>
	  </div>
    </div>
    
  </div>
	<!--   Core JS Files   -->
  <script src="../assets/js/core/jquery.min.js" type="text/javascript"></script>
  <script src="../assets/js/core/popper.min.js" type="text/javascript"></script>
  <script src="../assets/js/core/bootstrap.min.js" type="text/javascript"></script>
  <!--  Plugin for Switches, full documentation here: http://www.jque.re/plugins/version3/bootstrap.switch/ -->
  <script src="../assets/js/plugins/bootstrap-switch.js"></script>
  <!--  Plugin for the Sliders, full documentation here: http://refreshless.com/nouislider/ -->
  <script src="../assets/js/plugins/nouislider.min.js" type="text/javascript"></script>
  <!--  Plugin for the DatePicker, full documentation here: https://github.com/uxsolutions/bootstrap-datepicker -->
  <script src="../assets/js/plugins/bootstrap-datepicker.js" type="text/javascript"></script>
  <!-- Control Center for Now Ui Kit: parallax effects, scripts for the example pages etc -->
  <script src="../assets/js/now-ui-kit.js?v=1.3.0" type="text/javascript"></script>
 
  <script>
		
			new Vue({
				el: '#search',
				data() {
					return {
						search:'',
						passage:'',
						code:'',
						reading:'',
						
					}
				},
				mounted() {								
				},
				methods: {
					submit() {
						axios.get('/test//SearchServlet',{
					        params: {
					        	search:this.search,
								passage:this.passage,
								code:this.code,
							 
					        }
					      })
					      .then((response) => {
					        console.log(response.data);//请求的返回体				       
					      	this.passage = response.data.passage;	
					        this.code = response.data.code;
					      })
					      .catch((error) => {
					        console.log(error);//异常
					 });
						
					if(code==0){
						alert("找不到相关内容！！！");
					}	
				},
				read(item) {
					axios.get('/test/SearchServlet',{
					        params: {					
							  reading:item.id,
					        }
					      })
					      .then((response) => {
					        console.log(response.data);//请求的返回体						        						      			        						        						       
					      })
					      .catch((error) => {
					        console.log(error);//异常
					 });
					 window.location.href='/test/view/read.html'; 
				},
					
				}

			})
		
		</script>
<script>
      
      window.onload=function()
      {
    	  
          var btn=document.getElementById('button');
          var texts=document.getElementById('texts');
          var content=document.getElementById('search');                           
          var str=content.innerHTML;//方便替换                                                
          console.log(str);            
          btn.onclick=function(){                    
              var val=texts.value;//文本内容
              if(!(str.indexOf(val)==-1))
              {
                  content.innerHTML=str.split(val).join('<span id="change">'+val+'</span>');//分成一个个，匹配
              }
          }
      }  
  </script>
</body>
</html>